<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">主题乐园</el-breadcrumb-item>
      <el-breadcrumb-item>欢乐海洋</el-breadcrumb-item>
    </el-breadcrumb>
    <div>
      <TopicSwiper :swiperOptions="oceanSwiper">
        <TopicSwiperItem
          v-for="(item, index) in swiperList"
          :key="index"
          class="swiper-item"
        >
          <el-radio v-model="radio" :label="index + 1">
            <el-card
              :class="radio == index + 1 ? 'checked' : ''"
              :body-style="{ padding: '0px', width: '210px', height: '369px' }"
            >
              <img :src="item.imgUrl" width="210" height="279" class="image" />
              <div class="describe" style="padding: 14px">
                <h2 :class="radio == index + 1 ? 'h2_border' : ''">
                  0{{ index + 1 }}
                </h2>
                <div>
                  <p class="title">{{ item.title }}</p>
                  <p class="start">
                    欢乐指数：<span v-for="i in item.startNum" :key="i">★</span>
                  </p>
                </div>
              </div>
            </el-card>
          </el-radio>
        </TopicSwiperItem>
      </TopicSwiper>
      <div style="margin-top: 30px">
        <div style="width: 685px; float: left">
          <el-carousel height="356px" v-if="radio == 1">
            <el-carousel-item v-for="(item, index) in carousel_1" :key="index">
              <img :src="item.imgUrl" height="356px" width="685px" />
            </el-carousel-item>
          </el-carousel>
          <img
            :src="carousel_2.imgUrl"
            alt=""
            v-if="radio == 2"
            height="356px"
            width="685px"
          />
          <img
            :src="carousel_3.imgUrl"
            alt=""
            v-if="radio == 3"
            height="356px"
            width="685px"
          />
          <img
            :src="carousel_4.imgUrl"
            alt=""
            v-if="radio == 4"
            height="356px"
            width="685px"
          />
          <img
            :src="carousel_5.imgUrl"
            alt=""
            v-if="radio == 5"
            height="356px"
            width="685px"
          />
          <img
            :src="carousel_6.imgUrl"
            alt=""
            v-if="radio == 6"
            height="356px"
            width="685px"
          />
          <img
            :src="carousel_7.imgUrl"
            alt=""
            v-if="radio == 7"
            height="356px"
            width="685px"
          />
        </div>
        <div class="content">
          <h3>{{ content_1.h3 | h3Filter() }}</h3>
          <div>
            <strong>{{ content_1.strong | strongFilter() }}</strong>
            <span>{{ content_1.span | spanFilter() }}</span>
          </div>
          <p>{{ content_1.p | pFilter() }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopicSwiper from "@/components/TopicSwiper.vue";
import TopicSwiperItem from "@/components/TopicSwiperItem.vue";

// 过滤器中使用data中的数据
// 1. 声明一个that变量
// 2. 在beforeCreate生命周期函数中将this赋值给that
// 3. 在过滤器中通过that.调用
let that;
export default {
  components: {
    TopicSwiper,
    TopicSwiperItem,
  },
  filters: {
    h3Filter() {
      return that[`content_${that.radio}`].h3;
    },
    strongFilter() {
      return that[`content_${that.radio}`].strong;
    },
    spanFilter() {
      return that[`content_${that.radio}`].span;
    },
    pFilter() {
      return that[`content_${that.radio}`].p;
    },
  },
  data() {
    return {
      radio: "1",
      oceanSwiper: {
        slidesPerView: 5,
        spaceBetween: 30,
      },
      swiperList: [
        {
          imgUrl: require("@/assets/images/HappyOcean-1.png"),
          title: "冲浪勇士",
          startNum: 5,
        },
        {
          imgUrl: require("@/assets/images/HappyOcean-2.png"),
          title: "飞越长江",
          startNum: 5,
        },
        {
          imgUrl: require("@/assets/images/HappyOcean-3.png"),
          title: "海马骑士",
          startNum: 5,
        },
        {
          imgUrl: require("@/assets/images/HappyOcean-4.png"),
          title: "极速穿越",
          startNum: 5,
        },
        {
          imgUrl: require("@/assets/images/HappyOcean-5.png"),
          title: "奇趣飞鱼",
          startNum: 3,
        },
        {
          imgUrl: require("@/assets/images/HappyOcean-6.png"),
          title: "水上飞机",
          startNum: 4,
        },
        {
          imgUrl: require("@/assets/images/HappyOcean-7.png"),
          title: "音乐飞船",
          startNum: 4,
        },
      ],
      carousel_1: [
        {
          imgUrl: require("@/assets/images/HappyOcean-1-1.png"),
        },
        {
          imgUrl: require("@/assets/images/HappyOcean-1-2.png"),
        },
        {
          imgUrl: require("@/assets/images/HappyOcean-1-3.png"),
        },
        {
          imgUrl: require("@/assets/images/HappyOcean-1-4.png"),
        },
      ],
      carousel_2: {
        imgUrl: require("@/assets/images/HappyOcean-2-1.png"),
      },
      carousel_3: {
        imgUrl: require("@/assets/images/HappyOcean-3-1.png"),
      },
      carousel_4: {
        imgUrl: require("@/assets/images/HappyOcean-4-1.png"),
      },
      carousel_5: {
        imgUrl: require("@/assets/images/HappyOcean-5-1.png"),
      },
      carousel_6: {
        imgUrl: require("@/assets/images/HappyOcean-6-1.png"),
      },
      carousel_7: {
        imgUrl: require("@/assets/images/HappyOcean-7-1.png"),
      },
      content_1: {
        h3: "冲浪勇士",
        strong: "站立式“W”型轨道撞浪体验  ",
        span: "项目特点：旋转 W型冲浪摆动    欢乐指数：★★★★★",
        p: "在“W”型轨道上360°旋转运行，海风浪花迎面扑来，体验极速冲浪的乐趣。不去海边，也能一同感受冲浪的刺激与欢畅！",
      },
      content_2: {
        h3: "飞越长江",
        strong: "华中首个7D球幕飞行影院  ",
        span: "项目特点： 高空 提升    欢乐指数：★★★★★",
        p: "飞越亚洲第一长河--长江，在俯仰摇摆中感受极速飞翔的视觉快感，领略万里长江壮丽山河，感受凌空俯瞰的气势磅礴！7D球幕影院带你身临其境，体验集听觉、视觉、嗅觉、触觉、味觉、感觉、互动于一体的逼真特效，感受超震撼视觉冲击！",
      },
      content_3: {
        h3: "海马骑士",
        strong: "超奇妙微型失重跳楼机   ",
        span: "项目特点： 忽上忽下 圆周运动    欢乐指数：★★★★★",
        p: "伴随着优美的音乐坐上可爱海马，他们上下跳动，忽高忽低，仿佛和海马一起翱翔大海，带来些许失重和眩晕感。",
      },
      content_4: {
        h3: "极速穿越",
        strong: "华中首个5D过山车   ",
        span: "项目特点： 动感 绚丽 刺激    欢乐指数：★★★★★",
        p: "极速穿越奇幻冒险，你就是主角！急转摆动，颠簸跌宕，感受穿梭坠落的快感,给你亲临其境的畅快刺激感受，赶快来挑战！",
      },
      content_5: {
        h3: "奇趣飞鱼",
        strong: "无敌空中模拟激战飞车   ",
        span: "项目特点： 提升 旋转 上下起伏    欢乐指数：★★★",
        p: "坐在小飞鱼的背上，旋转、飞跃,在欢乐海洋的上空飞翔,在变速转动、高低起伏中体验梦幻翱翔的乐趣。",
      },
      content_6: {
        h3: "水上飞机",
        strong: "华中首创双环式贴水飞行器   ",
        span: "项目特点：  高速 离心 旋转    欢乐指数：★★★★",
        p: "水上飞机踏浪而来，时而在天上飞舞，时而从水面掠过，溅起欢快的水花，在不断地俯冲、旋转、追逐中体验飞行的畅快！",
      },
      content_7: {
        h3: "音乐飞船",
        strong: "超刺激旋转式空中飞船    ",
        span: "项目特点： 动感 旋转 上下起伏   欢乐指数：★★★★",
        p: "伴随着音乐，座舱缓缓旋转，紧接着一波接一波的翻滚，瞬间提升、跌落、停止、翻滚，和爸爸妈妈一起玩转心跳！",
      },
    };
  },
  computed: {},
  beforeCreate() {
    that = this;
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
::v-deep .el-breadcrumb {
  font-size: 21px;
  line-height: 2;
}

.checked {
  background-color: #f7b324;
  color: #fff;
}

.h2_border {
  border-right: 2px solid #fef2d8 !important;
}

::v-deep .el-radio__input {
  display: none;
}

.swiper-item {
  display: flex;
  flex-direction: column;

  .el-card {
    border-radius: 0 0 20px 20px;
  }

  .el-card:hover {
    background-color: #f7b324;
    color: #fff;
    cursor: pointer;
  }

  .el-card:hover h2 {
    border-right: 2px solid #fef2d8;
  }

  .describe {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    margin-top: 10px;

    h2 {
      border-right: 2px solid #575757;
      padding-right: 5px;
      margin-right: 10px;
    }

    .title {
      font-size: 16px;
      margin-bottom: 5px;
    }

    .start {
      font-size: 12px;
    }
  }
}

.content {
  background-color: #f7b324;
  border-radius: 10px;
  padding: 20px;
  margin-left: 705px;
  min-height: 316px;

  h3 {
    width: max-content;
    padding: 0 20px;
    height: 60px;
    line-height: 60px;
    color: #fff;
    font-size: 24px;
    background-color: #d29004;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 20px;
  }

  > div {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #df9f18;
    padding-bottom: 20px;
    padding-left: 5px;
    margin-bottom: 25px;
  }

  > p {
    line-height: 24px;
    padding-left: 5px;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
  }
}
</style>
